<template>
    <div class="adress">
        <div class="postadd_head">
          
            <i class="iconfont icon-fanhui"></i>
            <span>工作地点</span>
        
            
        </div>
        <div class="ph_xian">

        </div>
        <div class="ph_table">
            <div class="pht_div">
                <span>亚洲</span>
                <div class="phtd_xian">

                </div>
            </div>
            <div class="pht_div">
                <span>欧洲</span>
                <div class="phtd_xian">
                </div>
            </div>
            <div class="pht_div">
                <span>非洲</span>
                <div class="phtd_xian">
                </div>
            </div>
            <div class="pht_div">
                <span>北美洲</span>
                <div class="phtd_xian">
                </div>
            </div>
            <div class="pht_div">
                <span>南美洲</span>
                <div class="phtd_xian">
                </div>
            </div>
            <div class="pht_div">
                <span>大洋洲</span>
                <div class="phtd_xian">
                </div>
            </div>
        </div>
        <div class="ph_content">
            <div class="phc_left">
                <div class="phc_div">
                    <span>中国</span>
                </div>
                <div class="phc_div">
                    <span>日本</span>
                </div>
                <div class="phc_div">
                    <span>韩国</span>
                </div>
                <div class="phc_div">
                    <span>泰国</span>
                </div>
                <div class="phc_div">
                    <span>马来西亚</span>
                </div>
            </div>
            <div class="phc_right">
                <div class="phcr_head">
                    <input placeholder="搜索城市名字"/>
                </div>
                <div class="phcr_content">
                    <div class="phcrc_head">
                        <span>A</span>
                    </div>
                    <div class="phcrc_list">
                        <div class="phcrcl_div">
                            <span>安达市</span>
                        </div>
                        <div class="phcrcl_div">
                            <span>鞍山</span>
                        </div>
                        <div class="phcrcl_div">
                            <span>阿尔山市</span>
                        </div>
                        <div class="phcrcl_div">
                            <span>阿坝藏族羌族自治州</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>
  
<script>
    

    export default {
        name: 'address',
        components: {
     
        }
    }
</script>
<style scoped lang="less">
    .adress{
        width: 100%;
        height: 100vh;
        background: #ffffff;
    }
    .postadd_head{
        width: 100%;
        height: 1.1733rem;
        background: url("../../assets/imgs/qiye_head.png");
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 .4667rem;
        box-sizing: border-box;
    }
    .postadd_head .iconfont{
        font-size: .4267rem;
        color: #999999;
    }
    .postadd_head span{
        font-size: .3733rem;
        color: #333333;
        margin-left: .2667rem;
    }
    .ph_xian{
        width: 100%;
        height: .1333rem;
        background: #F8F8F8;
    }
    .ph_table{
        width: 100%;
        height: 1.2267rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .pht_div{
        flex: 1;
        font-size: .3733rem;
        color: #333333;
        line-height: .4933rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .phtd_xian{
        width: .7467rem;
        height: .0533rem;
        background: #F5792A;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -0.0667rem;
        margin: 0 auto;
    }
    .ph_content{
        width: 100%;
        height: calc(100vh - 2.5333rem);
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .phc_left{
        width: 2.08rem;
        height: 100%;
        background: #F8F8F8;
    }
    .phc_div{
        width: 100%;
        height: 1.1733rem;
        background: #F8F8F8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .32rem;
        color: #333333;
    }
    .phc_right{
       flex: 1;
       height: 100%;
       overflow: auto;
       padding: 0 .2133rem;
       box-sizing: border-box;
    }
    .phcr_head{
        width: 100%;
        height: 1.1733rem;
        background: #F9F9F9;
        border-radius: .1067rem;
    }
    .phcr_head input{
        width: 100%;
        height: 100%;
        background: #F9F9F9;
        border-radius: .1067rem;
       text-align: center;
       border: 0px;
       outline: none;
    }
    .phcrc_head{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: .4267rem;
        color: #333333;
        font-weight: 700;
        line-height: .56rem;
        margin-top: .5333rem;

    }
    .phcrc_list{
        width: calc(100% + .2133rem);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .phcrcl_div{
        width: 2.26rem;
        height: 1.0667rem;
        background: #F9F9F9;
        border-radius: .1067rem;
        margin-top: .2133rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .32rem;
        color: #9E9E9E;
        line-height: .4267rem;
        margin-right: .2133rem;
        padding: 0 .2133rem;
        box-sizing: border-box;
        text-align: center;
    }
</style>

  